<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>基本案例</title>
        <script src="vue@3.2.26.js"></script>
    </head>
    <body>

        <div id="root"></div>

        <script type="text/javascript">

            const options = {
                // 为根组件指定模板
                template: `
                          <p @mouseover="change" @mouseout="recover">{{ message }}</p>
                          <p>使用组件</p>
                          <!-- 在根组件的模板中可以通过 组件名称 使用全局注册的自定义组件 -->
                          <button-counter></button-counter>
                          <!-- 可以将组件进行任意次数的复用 -->
                          <button-counter></button-counter>
                          <!-- 每个组件都是独立的 -->
                          <button-counter></button-counter>`,
                // 为根组件指定 Data Property
                data(){
                    return {
                        message: '大家好' 
                    }
                },
                // 为根组件指定方法
                methods: {
                    change(e){
                        let t = e.target ;
                        t.style.backgroundColor = '#dfdfdf' ;
                    },
                    recover(e){
                        let t = e.target ;
                        t.style.backgroundColor = 'transparent' ;
                    }
                }
            }

            // 创建一个Vue应用
            const app = Vue.createApp( options );

            // 1、定义组件
            const componentDefinition = {
                // 为组件指定模板
                template: `<button @click="handle"> 你点了我 {{ counter }} 次 </button>`,
                // 为组件指定 Data Property
                data(){
                    return {
                        counter: 0
                    }
                },
                // 为组件指定方法
                methods: {
                    handle(){
                        // 注意，这里的 this 表示当前组件
                        console.log( this );
                        this.counter++ ;
                    }
                }
            }

            // 2、注册组件 (在 Vue.js 3 中，通过 app 注册组件属于全局注册)
            // app.component( 组件名称 , 组件定义 );
            app.component( 'button-counter' , componentDefinition );

            const vm = app.mount( "#root" );
            console.log( vm );
        </script>
        
    </body>
</html>